<template>
  <div id="detail_tab-component">
    <table class="tab1">
      <tbody>
        <tr v-for="(item, index) in canshu1[0]" :key="index">
          <td v-for="(item1, indey) in item" :key="indey">
            {{ item1 }}
          </td>
        </tr>
      </tbody>
    </table>

    <table class="tab2">
      <tbody>
        <tr v-for="(item, index) in canshu2" :key="index">
          <td>
            {{ item.key }}
          </td>
          <td>
            {{ item.value }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "Detail_tab",
  props: {
    canshu1: {
      type: Array,
      default: [],
    },
    canshu2: {
      type: Array,
      default: [],
    },
  },
}
</script>

<style lang="less" scoped>
#detail_tab-component {
  padding: 17px 12px;
  background-color: #fff;
  border-bottom: 1.33333vw solid #f2f5f8;
}
.tab1,
.tab2 {
  width: 100%;
  tr {
    display: flex;
    line-height: 35px;
    td {
      font-size: 12px;
      border-bottom: 1px solid #ccc;
    }
  }
}

.tab1 {
  td {
    flex: 1;
  }
}

.tab2 {
  td:nth-of-type(1) {
    width: 30%;
  }
  td:nth-of-type(n + 2) {
    flex: 1;
    color: #eb4868;
  }
}
</style>
